<template>
  <el-dialog
    title="班级交接确认"
    :visible="visible"
    width="800px"
    append-to-body
    :before-close="handleBeforeClose"
  >
    <!-- 班级信息面板 -->
    <div class="class-info-panel">
      <h4 class="panel-title">班级信息</h4>

      <el-row :gutter="20">
        <el-col :span="12">
          <div class="info-item">
            <span class="label">培训类别：</span>
            <span class="value">{{ trainingClassInfo.trainingProjectNames }}</span>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="info-item">
            <span class="label">培训班名称：</span>
            <span class="value">{{ trainingClassInfo.trainingClassName}}</span>
          </div>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="12">
          <div class="info-item">
            <span class="label">培训班编号：</span>
            <span class="value">{{ trainingClassInfotrainingClassCode  }}</span>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="info-item">
            <span class="label">期次：</span>
            <span class="value">{{ trainingClassInfotrainingSession  }}</span>
          </div>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="12">
          <div class="info-item">
            <span class="label">年份：</span>
            <span class="value">{{ trainingClassInfotrainingYear  }}</span>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="info-item">
            <span class="label">开班类型：</span>
            <span class="value">{{ trainingClassInfomappedStartupType  }}</span>
          </div>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="12">
          <div class="info-item">
            <span class="label">培训部门：</span>
            <span class="value">{{ trainingClassInfotrainingDepartment  }}</span>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="info-item">
            <span class="label">培训类型：</span>
            <span class="value">{{ trainingClassInfomappedTrainingType  }}</span>
          </div>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="12">
          <div class="info-item">
            <span class="label">培训开始日期：</span>
            <span class="value">{{ trainingClassInfostartDate  }}</span>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="info-item">
            <span class="label">培训截止日期：</span>
            <span class="value">{{ trainingClassInfoendDate  }}</span>
          </div>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="12">
          <div class="info-item">
            <span class="label">班主任1：</span>
            <span class="value">{{ trainingClassInfoheadTeacher1Name  }}</span>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="info-item">
            <span class="label">班主任2：</span>
            <span class="value">{{ trainingClassInfoheadTeacher2Name  }}</span>
          </div>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="12">
          <div class="info-item">
            <span class="label">班级学员人数：</span>
            <span class="value">{{ trainingClassInforegisteredCount || 0 }}</span>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="info-item">
            <span class="label">总名额：</span>
            <span class="value">{{ trainingClassInfototalQuota || 0 }}</span>
          </div>
        </el-col>
      </el-row>
    </div>

    <!-- 交接选项 -->
    <div class="handover-option">
      <span class="label">使用完成交接：</span>
      <el-radio-group v-model="handoverForm.isCompleted">
        <el-radio :label="true">是</el-radio>
        <el-radio :label="false">否</el-radio>
      </el-radio-group>
    </div>

    <!-- 原因备注 -->
    <div class="reason-section">
      <span class="label">原因备注：</span>
      <el-input
        type="textarea"
        v-model="handoverForm.reasonRemark"
        :rows="4"
        placeholder="请输入交接原因"
        :maxlength="500"
      />
      <div class="word-count">{{ handoverForm.reasonRemark.length }}/500</div>
    </div>

    <!-- 操作按钮 -->
    <div slot="footer" class="dialog-footer">
      <el-button @click="handleCancel">取消</el-button>
      <el-button
        type="primary"
        @click="handleSubmit"
        :loading="submitLoading"
      >
        提交
      </el-button>
    </div>
  </el-dialog>
</template>

<script>
export default {
  name: 'ClassHandoverDialog',
  props: {
    visible: {
      type: Boolean,
      required: true,
      default: false
    },
    trainingClassInfo: {
      type: Object,
      required: true,
      default: () => ({})
    },
    handoverForm: {
      type: Object,
      required: true,
      default: () => ({
        isCompleted: true,
        reasonRemark: ''
      })
    }
  },
  data() {
    return {
      submitLoading: false // 提交加载状态
    }
  },
  watch: {
    // 监听弹窗显示状态，重置加载状态
    visible(newVal) {
      if (!newVal) {
        this.submitLoading = false
      }
    }
  },
  methods: {
    // 弹窗关闭前触发
    handleBeforeClose() {
      this.$emit('update:visible', false)
      this.$emit('cancel-handover')
    },

    // 取消交接
    handleCancel() {
      this.$emit('update:visible', false)
      this.$emit('cancel-handover')
      this.$message.info('已取消班级交接')
    },

    // 提交交接
    async handleSubmit() {
      // 表单验证
      if (!this.handoverForm.reasonRemark.trim()) {
        return this.$message.warning('请输入交接原因')
      }

      // 提交前校验班主任信息
      if (!this.trainingClassInfoheadTeacher2Name) {
        return this.$message.error('班主任2信息不存在，无法交接')
      }

      this.submitLoading = true
      try {
        // 触发父组件提交逻辑
        this.$emit('submit-handover', { ...this.handoverForm })
      } catch (error) {
        this.$message.error('提交失败，请重试')
      } finally {
        this.submitLoading = false
      }
    },

    // 状态文本映射
    statusStr(status) {
      const statusMap = {
        '0': '未交接',
        '1': '交接中',
        '2': '已交接'
      }
      return statusMap[status] || '未知'
    }
  }
}
</script>

<style scoped>
.class-info-panel {
  border: 1px solid #e4e7ed;
  padding: 15px;
  margin-bottom: 20px;
  border-radius: 4px;
}

.panel-title {
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 15px;
  padding-bottom: 10px;
  border-bottom: 1px solid #f0f0f0;
}

.info-item {
  display: flex;
  align-items: center;
  min-width: 300px;
  margin-bottom: 10px;
}

.info-item .label {
  width: 120px;
  color: #606266;
}

.info-item .value {
  flex: 1;
  word-break: break-all;
}

.handover-option {
  margin: 15px 0;
  display: flex;
  align-items: center;
}

.handover-option .label {
  width: 120px;
  color: #606266;
}

.reason-section {
  margin: 15px 0;
}

.reason-section .label {
  display: inline-block;
  width: 120px;
  color: #606266;
  vertical-align: top;
}

.reason-section .el-textarea {
  width: calc(100% - 130px);
}

.word-count {
  text-align: right;
  font-size: 12px;
  color: #909399;
  margin-top: 5px;
}

.dialog-footer {
  text-align: right;
}
</style>
